<template>

  <div>

    <Card>

      <div class="p-relative" style="padding-top: 10px;">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
              <Input v-model="searchObj.keywords" placeholder="请输入商家名称 单号" style="width:250px" />
          </div>
          <div class="flex-item">
            <DatePicker   @on-change="changeApplyTime"  type="daterange" placeholder="请选择提现申请时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item">
            <DatePicker    @on-change="changeAuditTime"  type="daterange" placeholder="请选择审核时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item">
            <Select v-model="searchObj.status" style="width:130px" placeholder='请选择状态' @on-change="changStatus">
              <Option v-for="item in statusArr" :value="item.value"  >{{ item.name }}</Option>
            </Select>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="warning">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
          <div class="flex-item search-btn" @click="exportExcel">
            <Button type="warning">导出</Button>
          </div>
        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">


        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='success' @click="audit(row, 2)" v-if="row.status==1"  size='small'>通过</Button>
            <Button type='error' @click="audit(row, 3)" v-if="row.status==1" size='small'>不通过</Button>

          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>

    </Card>

    <!-- 通过弹窗 -->
    <Modal v-model="auditModal" :title="auditTitle" @on-cancel="auditModal=false"
      @on-ok="confirmAudit">
      <Form ref="payformValidate" :label-width="0">
        <FormItem label="" prop="code">
          <Input v-model="remark" type="textarea" placeholder="请输入备注"></Input>
        </FormItem>
      </Form>
    </Modal>

  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'
  import {
    formatDate
  } from '@/config/publicTool.js' // 日期转换,//调用的时候formatDate(),不需要this

  // 接口
  import {
    getList,
    submitAudit,
    exportData

  } from '@/api/audit-group/withdraw'
  import {
    tableOption
  } from '../../../data/audit-group/withdraw.js'
  import Tables from '_c/tables'

  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables,

    },
    created() {
      let _this = this
      this.$nextTick(function() {
        // 权限校验
        _this.role_audit = permission(this.roles, 'withdrawApply/audit')


      })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles,

      }),

    },
    data() {
      return {
        role_audit: false,
        searchObj:{
          keywords:'',
          apply_time:'',
          audit_time:'',
          status:0
        },
        audit_id:0,
        audit_type:0,
        auditTitle:'',
        auditModal:false,
        remark:'',
        loadingText: '',
        tableOption: tableOption,
        page: {
          current: 1,
          total: 0,
          pageSize: 10,

        },
        data: {
          detail: [],
          list: [],
        },

        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        rowId: 0,
        statusArr:[
          {
            value:0,
            name:'全部'
          },
          {
            value:1,
            name:'待审核'
          },
          {
            value:2,
            name:'通过'
          },
          {
            value:3,
            name:'不通过'
          }
        ]
      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this
        let params = {
          page: this.page.current,
          name:this.searchObj.keywords,
          apply_time:this.searchObj.apply_time,
          audit_time:this.searchObj.audit_time,
          status:this.searchObj.status
        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size

          }
        }).catch(function(error) {
          // 异常

        })
      },
      changepage(e) {
        this.page.current = e;
        this.getList();

      },
      search() {
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {
          apply_time:'',
          audit_time:'',
          keywords: '',
          status:0

        } // 清空搜索框
        this.getList()
      },
      // 刷新
      refresh() {
        this.getList()
      },
      //提现审核
      audit(row,type){
        if(!this.role_audit){
          this.$Message.error('您没有操作权限')
          return
        }

        this.audit_type = type;
        this.audit_id = row.id
        if(type==2){
           this.auditTitle = '审核通过';
           this.remark='提现申请通过';
        }else{
           this.auditTitle = '审核不通过';
           this.remark='';
        }
         this.auditModal = true;


      },
      confirmAudit(){

        let _this = this

        if(this.remark.length<=0 || this.remark==''){
           this.$Message.error('请输入不通过的审核备注')
            return ;
        }
        let params = {
           status:this.audit_type,
           remark:this.remark,
           id:this.audit_id
        }

        submitAudit(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data

            _this.getList();

          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      changeApplyTime(e){
        this.searchObj.apply_time=e
      },
      changeAuditTime(e){
        this.searchObj.audit_time=e
      },
      changStatus(){
        this.getList();
      },
      exportExcel() {
      
        let _this = this

        let obj = {
         page: this.page.current,
         name:this.searchObj.keywords,
         apply_time:this.searchObj.apply_time,
         audit_time:this.searchObj.audit_time,
         status:this.searchObj.status
        }

        exportData(obj).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data.url

            window.location.href = result
          } else {
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          // console.log(error)
        })
      },
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
